tags: Vuejs

樣式渲染

畫面的呈現有時會因應資料的不同，產生不同的視覺樣式，而通常我們會使用 v-bind 指令動態渲染 HTML attribute class，透過更換、新增 class 去切換不同的樣式呈現，達到想呈現給用戶的畫面樣式。在綁定多個 class 時，可以使用 expression 拼接多個字串內容，但是這同時為我們帶來了字串拼接麻煩且容易出錯的缺點：

下方為拼接字串的簡單範例，我們可以看到使用字串拼接的攏長：

<p v-bind:style="styleTextOne + styleTextTwo + styleThree">{{ text }}</p>

不過，其實有更好的解決方式，Vue 注意到了該項需求，並在 v-bind 指令上，針對 class、style 樣式屬性進行了增強，可以填入的內容除了 expression 外，還可以填入 Array、Object 兩種格式，幫助我們更加靈活的渲染 class、style，以下列出 v-bind 針對 class 的增強用法：

v-bind:calss ✐

Object 語法 ✐

對於 v-bind:calss 可以填入 v-bind:class="{}"，動態切換渲染多個 class，同時普通的 class attribute 仍可以同時使用，每個 key 對應想渲染的 class 名稱，該 class 會依所填入 value 的 truthy、falsy 決定是否渲染該 class，當為 truthy 則渲染；反之則不會渲染該樣式。

下方簡單的練習，透過 v-bind:class="{}" 渲染多個 class：

• red -> isRed，true -> 該 class 會渲染。
• bold -> isBold，false -> 該 class 不會渲染。
• letter-space -> isSpacing，true -> 該 class 會渲染。

const vm = new Vue({
    el: '#app',
    template: `<p :class="{ red: isRed, bold: isBold, 'letter-space': isSpacing  }">text</p>`,
    data: {
        isRed: true,
        isBold: false,
        isSpacing: true,
    },
    computed: {

    },
})

對比字串形式，一切變得更加簡潔、靈活。
除此之外，我們也可以將剛剛的物件移入到 data 簡化模板中攏長的物件呈現。

const vm = new Vue({
  el: "#app",
  template: `<p :class="styleObj">text</p>`,
  data: {
    styleObj: {
      red: true,
      bold: true,
      "letter-space": true,
    },
  },
});

我們也可以填入 computed 進行靈活的運算，是一個方便的應用方式，下方列出了使用 computed 的範例：

const vm = new Vue({
    el: "#app",
    template: `<p :class="styleObj">text</p>`,
    data: {
        isRed: true,
        isBold: true,
        isActive: true
    },
    computed: {
        styleObj(){
            return {
                red: this.isRed && !this.isActive,
                bold: this.isBold && this.isActive
            }
        }
    },
  });

可以看到使用 computed 使我們可以進行靈活的運算，同時保持模板整潔的優點。

Array 語法 ✐

看完了物件語法，現在則來到 Array，填入 Array 可以動態渲染多個 class，當我們要動態渲染一拖拉固的 class 時為一個好選擇，另外若是需要根據條件切換，可以使用 三元運算子。

下方列出使用 Array 的簡單範例，並且加入了 三元運算子 條件切換 bold：

const vm = new Vue({
    el: "#app",
    template: `<p :class="[errorClass, isBold ? 'bold' : '']">text</p>`,
    data: {
        errorClass: 'button-danger',
        isBold: true,
        isActive: true
    }
  });

當有多個條件切換時，可以在 Array 寫入 Object，Object 用法同上，幫助減少呈現繁瑣的多個 三元運算子

const vm = new Vue({
  el: "#app",
  template: `<p :class="['red', { bold: isBold }]">text</p>`,
  data: {
    isRed: true,
    isBold: true,
    isActive: true,
  },
});

以上為此次內容，感謝看到這裡的你，我們明天見。

若是文中有任何錯誤、錯字、想討論的內容，歡迎各位大大不吝鞭笞指正、交流分享，筆者不慎感激 ✦ ✦ ✦

▶︎ 筆者 github：https://github.com/YUN-RU-TSENG
▶︎ 老王賣瓜之筆者另一篇鐵人：每天來點 CSS Specification

▶︎ 倘若不斷向深處扎根，似乎就能茁壯成長 - RM

參考資料：

1. Vuejs.org 2.x